<template>
  <transition>
    <div class="back-to-top iconfont" v-show="show" @click="toTop">
      &#xe633;
    </div>
  </transition>
</template>
<script>
export default {
  name: 'Top',
  props: {
    show: Boolean
  },
  methods: {
    toTop () {
      let timer = setInterval(() => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        let speed = scrollTop / 4
        if (document.documentElement.scrollTop) document.documentElement.scrollTop -= speed
        else document.body.scrollTop -= speed
        if (scrollTop === 0) {
          clearInterval(timer)
        }
      }, 10)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .v-enter-active
    transition: opacity .5s
  .v-leave-active
    transition: opacity .5s
  .v-enter
    opacity: 0
  .v-leave-to
    opacity: 0
  .back-to-top
    z-index: 2000
    position: fixed
    width: .5rem
    height: .5rem
    border-radius: 50%
    line-height: .5rem
    text-align: center
    right: .2rem
    bottom: .2rem
    color: #495A80
    font-size: .3rem
    border: 1px rgb(204, 204, 204) solid
    background: rgba(255, 255, 255, .5)
</style>
